<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .quan {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .quan>div {
            width: 200px;
            height: 200px;
            border: 1px solid;
        }
    </style>
</head>

<body>
    <!-- ### 二十九、flex布局
1. 基础布局练习：
- 创建一个包含三个子元素的容器，并使用display: flex;将其设置为Flex容器。
- 确保这三个子元素在容器中水平排列。
2. 主轴对齐练习：
- 使用justify-content属性，将上述练习中的子元素在主轴（默认为水平方向）上居中对齐。
- 将子元素在主轴上分散对齐，使用space-between和space-around属性。
width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
3. 交叉轴对齐练习：
- 使用align-items属性，将子元素在交叉轴（默认为垂直方向）上居中对齐。
- 尝试使用flex-start和flex-end属性，使子元素在交叉轴上分别对齐到顶部和底部。
align-items: flex-end;
    align-items: stretch;
4. 主轴方向练习：
- 使用flex-direction属性，将子元素的方向从水平改为垂直。
- 观察容器和子元素的排列方式如何变化。
flex-direction: column
flex-direction: column-reverse
5. 交叉轴方向练习：
- 使用flex-wrap属性，允许子元素在需要时换行。
- 使用align-content属性在多行情况下对齐子元素。
flex-direction: column-reverse
flex-wrap: nowrap
6. 使用flex实现如下几种布局-骰子布局练习
 -->
    <div class="quan">
        <div class="flex1"></div>
        <div class="flex2"></div>
        <div class="flex3"></div>
    </div>
</body>

</html>